<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-cont">
            <h-section title="变更计划" collapse>
                <div>
                    <span class="error-color" v-if="disabled">
                        {{ $filters.valToNameFilter('changeType', detail.changeType) }}
                    </span>
                    <a-radio-group v-model:value="changeType" @change="radioChange" v-else>
                        <a-radio v-for="item of dicOptions.changeType" :key="item.code" :value="item.code">
                            {{ item.dimensionName }}
                        </a-radio>
                    </a-radio-group>
                    <div class="margin-t-16">
                        <component ref="comRef" :is="comName" :detail="detail" :disabled="disabled" />
                    </div>
                </div>
            </h-section>
        </div>
    </div>
</template>

<script lang="ts">
import PlanEnd from './planEnd.vue';
import PlanEndAndAdd from './planEndAndAdd.vue';
import { defineComponent, ref, unref, reactive, toRefs, computed, watch } from 'vue';
export default defineComponent({
    name: 'ChangePlan',
    components: {
        PlanEnd,
        PlanEndAndAdd
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['detailChange'],
    setup(props, { emit }) {
        const comRef = ref<any>();
        const allCom = ['PlanEnd', 'PlanEndAndAdd'];
        const state = reactive<any>({
            loading: false,
            changeType: '1', // 变更类型
            versionList: [] // 版本选项列表
        });
        const form = computed(() => {
            return { changePlan: unref(comRef).changePlan };
        });
        const comName = computed(() => {
            let index = +state.changeType;
            return allCom[--index];
        });
        const validate = () => {
            const target = unref(comRef);
            return (target as any).validate();
        };
        const radioChange = (e) => {
            emit('detailChange', {
                changeType: e.target.value
            });
        };
        // 监听来自基本信息的修改
        watch(
            () => props.detail.changeType,
            (n) => {
                state.changeType = n;
            }
        );
        const init = () => {
            const { changeType } = toRefs(props.detail);
            state.changeType = changeType;
        };
        init();
        return {
            comRef,
            ...toRefs(state),
            radioChange,
            validate,
            comName,
            form
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
    }
}
</style>